<template>
  <Panel title="报警曲线" width="380px">
    <div class="chart-container">
      <div style="height: 100%; width: 100%" ref="chartRef"></div>
    </div>
  </Panel>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { shuffle, cloneDeep, throttle, debounce } from "lodash-es";

const chartRef = ref();

const year = ["2015", "2015", "2015", "2015", "2015", "2015", "2015", "2015"];
const color = [
  {
    type: "linear",
    x: 0,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#2560FF",
      },
      {
        offset: 1,
        color: "#5DFFFF",
      },
    ],
    global: false,
  },
  {
    type: "linear",
    x: 0,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#FF4C25",
      },
      {
        offset: 1,
        color: "#FFD25D",
      },
    ],
    global: false,
  },
];
const option = {
  grid: {
    left: 30,
    right: 10,
    top: 20,
    bottom: 20,
  },
  legend: {
    show:false,
    icon: "roundRect",
    data: [],
    textStyle: {
      color: "#FFFFFF",
    },
  },
  tooltip: {
    trigger: "axis",
  },
  color,
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "#FFFFFF80",
      },
    },
    axisTick: {
      show: true,
      length: 2,
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#FFFFFF80",
      },
    },
    axisTick: {
      show: true,
      length: 2,
    },
  },
  series: [],
};

const water = {
  name: "水",
  symbol: "none",
  data: [725, 932, 813, 680, 1290, 922, 890, 718],
  type: "line",
  smooth: true,
  barWidth: 10,
  areaStyle: {
    opacity: 0.8,
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#2560FF80",
      },
      {
        offset: 1,
        color: "#5DFFFF00",
      },
    ]),
  },
};

onMounted(() => {
  const chartOption = cloneDeep(option);
  chartOption.xAxis.data = year;
  chartOption.series = [water];
  chartOption.legend.data = ["水"];
  chartOption.color = [color[0]];
  echarts.init(chartRef.value).setOption(chartOption);
});
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 260px;
  padding: 16px 0px;
}
</style>
